<template>
  <div class="box_inner">
    <div class="mid-left">
      <div class="v_item">
        <div class="box-a" ref="boxA">
          <MidAEcharts :isPowerOn="true"></MidAEcharts>
        </div>
      </div>
      <div class="v_item">
        <div class="box-b" ref="boxb">
          <MidAEcharts :isPowerOn="false"></MidAEcharts>
        </div>
      </div>
    </div>
    <div class="mid-mid">
      <div class="map-box" ref="map"></div>
    </div>
    <div class="mid-right">
      <div class="v_item1">
        <div class="s_val">
          <!-- {{ orderHour }} -->
          <countTo :startVal="lastOrderHour" :endVal="orderHour" :duration="3000"></countTo>
        </div>
        <div class="s_info">今日订单统计</div>
      </div>
      <div class="v_item2">
        <div class="s_val">{{ orderDay }}</div>
        <div class="s_info">本月订单统计</div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { mapJson } from './map/350000'
import { optionB } from './map/set'
import dayjs from 'dayjs'
import MidAEcharts from './midA/midAEcharts.vue'
import CountTo from '@/utils/vue-count-to.min.js'

export default {
  name: 'BoxMidA',
  components: { MidAEcharts, CountTo },
  props: {
    msg: String
  },
  data() {
    return {
      lastOrderHour: 0,
      orderHour: 0,
      orderDay: '0',
      secondIntervalIns: null,
      dayTotal: 24151, // 每日目标总数
      timeInfo: {
        workHours: 9, // 每日工作时长
        startWorkHour: 8 // 开始工作的时间（小时），即：8点
      }
    }
  },
  // computed: {
  //   _orderHourStart() {
  //     return this.data
  //   },
  //   _orderHourOld() {
  //     return this.
  //   }
  // },
  mounted() {
    this.initMap()
    this.initOrderValue()
    this.$bus.$on('updateOrderHour', data => {
      this.lastOrderHour = this.orderHour || 0
      this.orderHour = data.totalVal
    })
  },
  methods: {
    initMap() {
      const myChart = echarts.init(this.$refs.map)
      echarts.registerMap('chinaCity', mapJson)
      myChart.setOption(optionB)
    },
    initOrderValue() {
      // const dayTotal = 24151
      const monTotal = 1565053
      const dayObj = dayjs()
      const curDay = dayObj.date()
      const curDays = dayObj.daysInMonth()
      // const curHour = dayObj.hour()
      // console.log(dayObj, curDay, curDays, curHour);
      this.orderDay = parseInt((monTotal / curDays) * curDay) + '台'
      // this.orderHour = parseInt((dayTotal / 24) * curHour) + '台'
      // 今日订单统计：已取消自己计算，其值来源于 smt+装配 的和
      // this.getCurTimeData()
      // this.refreshData()
    },
    getCurTimeData() {
      const hourNow = dayjs().hour()
      const minuteNow = dayjs().minute()
      // 已工作时长（分钟数）
      const workedMin = (+hourNow - this.timeInfo.startWorkHour) * 60 + minuteNow
      // 每分钟的产量值
      const getMinNum = targetVal => {
        const hourNum = targetVal / this.timeInfo.workHours
        const minNum = hourNum / 60
        return this.toFixed(minNum, 0)
      }
      // 日已生产数值
      const aPerMinVal = getMinNum(this.dayTotal) // 每分钟产量
      const aProduced = this.toFixed(workedMin * aPerMinVal, 0) // 工作开始时间到此刻时间的总产量
      this.orderHour = aProduced
    },
    refreshData() {
      this.secondIntervalIns && clearInterval(this.secondIntervalIns)
      this.secondIntervalIns = setInterval(this.getShowData.bind(this), 1000 * 10) // 每10s刷新
    },
    getShowData() {
      const getRandom = (num = 50) => Math.floor(Math.random() * num)
      this.orderHour = this.toFixed(this.orderHour + getRandom(), 0)
    },
    toFixed(n, fixedNum = 2) {
      return ~~(Math.pow(10, fixedNum) * n) / Math.pow(10, fixedNum)
    }
  },
  destroyed() {
    clearInterval(this.secondIntervalIns)
  }
}
</script>
<style scoped>
.box_inner {
  height: 290px;
  position: relative;
}
.mid-left {
  position: absolute;
  width: 114px;
  top: 10px;
  left: 50px;
}
.mid-left .v_item {
  height: 112px;
  margin-bottom: 5px;
  background-image: url(~@/assets/images/cont-bg4.png);
  background-repeat: no-repeat;
  background-size: 100%;
}
.mid-left .v_item .box-a,
.mid-left .v_item .box-b {
  height: 112px;
  width: 100%;
}
.mid-right {
  position: absolute;
  width: 205px;
  top: 20px;
  right: 30px;
}
.mid-right .v_item1 {
  height: 104px;
  padding-right: 20px;
  background-image: url(~@/assets/images/cont-bg5.png);
  background-repeat: no-repeat;
  background-size: 100%;
}
.mid-right .v_item2 {
  height: 104px;
  padding-right: 20px;
  background-image: url(~@/assets/images/cont-bg6.png);
  background-repeat: no-repeat;
  background-size: 100%;
}
.mid-right .v_item1 .s_val {
  color: #04d9eb;
  font-size: 30px;
  padding-top: 20px;
  line-height: 42px;
}
.mid-right .v_item1 .s_info {
  color: #fff;
  font-size: 14px;
}
.mid-right .v_item2 .s_val {
  color: #00c702;
  font-size: 30px;
  padding-top: 20px;
  line-height: 42px;
}
.mid-right .v_item2 .s_info {
  color: #fff;
  font-size: 14px;
}
.mid-mid {
  position: relative;
  top: -630px;
  left: 70px;
}
.map-box {
  height: 980px;
  width: 100%;
}
</style>
